<template>
  <div>
    <el-tabs tab-position="left" @tab-click="handleTabClick">
      <el-tab-pane label="个人信息">
        <div class="form">
          <el-form
            :model="userInfo"
            :rules="rules"
            ref="userInfo"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="头像" prop="avatar">
              <div class="demo-basic--circle">
                <div class="block">
                  <!-- <img class="usersAvatar" v-lazy="this.$store.state.userInfo.avatar"> -->
                  <el-upload
                    class="avatar-uploader"
                    :action="actionUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    name="file"
                    :data="uploadData"
                    :headers="headers"
                    :disabled="isContent"
                  >
                    <img
                      v-if="this.$store.state.userInfo.avatar"
                      v-lazy="this.$store.state.userInfo.avatar"
                      class="usersAvatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-row>
              <el-col :span="11">
                <el-form-item
                  label="昵称"
                  prop="nickname"
                  v-if="userInfo !== undefined"
                >
                  <el-input
                    v-model="userInfo.nickname"
                    :disabled="isContent"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item
                  label="手机号"
                  prop="phone"
                  v-model="userInfo.phone"
                >
                  <el-input
                    v-model.number="userInfo.phone"
                    autocomplete="off"
                    :disabled="isContent"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="所属院系" required>
              <el-col :span="11">
                <el-form-item prop="collegeId">
                  <el-select
                    filterable
                    v-model="userInfo.collegeId"
                    placeholder="请选择学院"
                    @change="colleageChanged(userInfo.collegeId)"
                    :disabled="isContent"
                  >
                    <el-option
                      v-for="(item, index) in collegeAndMajor"
                      :key="index"
                      :label="item.collegeName"
                      :value="item.collegeId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2" style="text-align: center"
                >-</el-col
              >
              <el-col :span="11">
                <el-form-item prop="majorId">
                  <el-select
                    v-model="userInfo.majorId"
                    placeholder="请选择专业"
                    :disabled="isContent"
                  >
                    <el-option
                      filterable
                      v-for="(item, index) in majorList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-radio-group
                    v-model="userInfo.gender"
                    :disabled="isContent"
                  >
                    <el-radio :label="0">男</el-radio>
                    <el-radio :label="1">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入学年份" prop="majorId">
                  <el-select
                    v-model="userInfo.grade"
                    placeholder="请选择入学年份"
                    :disabled="isContent"
                  >
                    <el-option
                      v-for="year in enrollmentYear"
                      :key="year"
                      :label="year"
                      :value="year"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="用户头衔">
              <el-checkbox-group
                v-model="titleIdList"
                @change="handleCheckedCitiesChange"
                :max="3"
                :disabled="isContent"
              >
                <el-checkbox
                  v-for="item in userTitle"
                  :label="item.id"
                  :key="item.id"
                  >{{ item.title }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="个人简介" prop="description">
              <el-input
                type="textarea"
                v-model="userInfo.description"
                :disabled="isContent"
                :rows="2"
                :cols="50"
                resize="none"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="mod" v-show="isModBut"
                >修改</el-button
              >
              <el-button type="primary" @click="cancelMod" v-show="!isModBut"
                >取消修改</el-button
              >
              <el-button
                type="primary"
                @click="submitForm('userInfo')"
                v-show="saveBtnDisabled"
                >保存</el-button
              >
              <el-button @click="resetForm('userInfo')" v-show="saveBtnDisabled"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的帖子" name="posts">
        <el-empty description="空空如也" v-if="posts.length === 0"></el-empty>
        <div
          v-for="(item, index) in posts"
          :key="index"
          class="infinite-list-item"
        >
          <!-- @click="$router.push(`/ywbd/postDetails?id=${item.id}`)" -->
          <img
            v-lazy="item.postImage"
            alt=""
            class="postImage"
            @click="$router.push(`/ywbd/postDetails?id=${item.id}`)"
            v-show="item.postImage"
          />
          <div class="boxRight">
            <div class="header">
              <div
                class="headerContent"
                @click="$router.push(`/ywbd/postDetails?id=${item.id}`)"
              >
                <div class="userContent">
                  <img v-lazy="item.userAvatar" alt="" class="userAvatar" />
                  <span>{{ item.userName }}</span>
                </div>
              </div>
              <div class="headerRight">
                <el-button
                  type="primary"
                  round
                  v-if="item.userId == $store.state.userInfo.id"
                  @click="$router.push(`/ywbd/modifyPost?id=${item.id}`)"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  round
                  @click="deletePosts(item.id)"
                  v-if="item.userId == $store.state.userInfo.id"
                  >删除</el-button
                >
              </div>
            </div>
            <div
              class="content"
              @click="$router.push(`/ywbd/postDetails?id=${item.id}`)"
            >
              <span class="text" v-html="item.content"></span>
            </div>
          </div>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :hide-on-single-page="page == 1"
            :current-page="page"
            :page-size="3"
            layout="prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="点赞过的帖子" name="likes">
        <el-empty
          description="空空如也"
          v-if="likesPosts.length === 0"
        ></el-empty>
        <div
          v-for="(item, index) in likesPosts"
          :key="index"
          class="infinite-list-item"
          @click="handlePostClick(item)"
        >
          <img
            v-lazy="item.postImage"
            alt=""
            class="postImage"
            v-show="item.postImage !== ''"
          />
          <div class="boxRight">
            <div class="headerContent">
              <div class="userContent">
                <img v-lazy="item.userAvatar" alt="" class="userAvatar" />
                <span>{{ item.userName }}</span>
              </div>
            </div>
            <div class="content">
              <span class="pContent" v-html="item.content"></span>
            </div>
          </div>
          <div class="del" v-show="item.id === null">
            <el-empty
              description="这个帖子已被删除"
              :image-size="70"
              class="pbox"
            ></el-empty>
          </div>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleLikesSizeChange"
            @current-change="handleLikesCurrentChange"
            :hide-on-single-page="page == 1"
            :current-page="likesPage"
            :page-size="3"
            layout="prev, pager, next"
            :total="likesTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="收藏过的帖子" name="collects">
        <el-empty
          description="空空如也"
          v-if="collectsPosts.length === 0"
        ></el-empty>
        <div
          v-for="(item, index) in collectsPosts"
          :key="index"
          class="infinite-list-item"
          @click="handlePostClick(item)"
        >
          <img
            v-lazy="item.postImage"
            alt=""
            class="postImage"
            v-show="item.postImage !== null"
          />
          <div class="boxRight">
            <div class="headerContent">
              <div class="userContent">
                <img v-lazy="item.userAvatar" alt="" class="userAvatar" />
                <span>{{ item.userName }}</span>
              </div>
            </div>
            <div class="content">
              <span class="pContent" v-html="item.content"></span>
            </div>
          </div>
          <div class="del" v-show="item.id === null">
            <el-empty
              description="这个帖子已被删除"
              :image-size="70"
            ></el-empty>
          </div>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleCollectsSizeChange"
            @current-change="handleCollectsCurrentChange"
            :hide-on-single-page="page == 1"
            :current-page="collectsPage"
            :page-size="3"
            layout="prev, pager, next"
            :total="collectsTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的活动" name="activity">
        <el-empty
          description="空空如也"
          v-if="activitieList.length === 0"
        ></el-empty>
        <div class="activity-box">
          <div class="book" v-for="(item, index) in activitieList" :key="index">
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-right: 30px;
              "
            >
              <div class="title">{{ item.subject }}</div>
              <div class="status">
                <el-tag>{{ item.statusName }}</el-tag>
              </div>
            </div>
            <div class="basicInformation">
              <div class="info">
                <div class="type">活动类型：{{ item.activityType }}</div>
                <div class="address">活动地点：{{ item.address }}</div>
              </div>
              <div class="info">
                <div class="numberOfPeople">限制人数：{{ item.alimit }}</div>
                <div class="">
                  活动时间：{{ item.activityStart }} - {{ item.activityEnd }}
                </div>
              </div>
              <div
                style="
                  align-items: center;
                  display: flex;
                  flex-direction: column;
                  height: 100px;
                  justify-content: space-around;
                "
              >
                <el-button round @click="goToDetailedPage(item.activityId)"
                  >活动详情</el-button
                >
                <el-button round @click="registrationInformation(item)"
                  >报名信息</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <div>
          <el-pagination
            @current-change="activityCurrentChange"
            :current-page="activityQueryData.pageNum"
            :page-size="activityQueryData.pageSize"
            layout="prev, pager, next"
            :total="activityQueryData.total"
            :hide-on-single-page="true"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-dialog
        title="报名信息"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
        center
      >
        <el-form
          :model="activityInfo"
          ref="activityInfo"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" size="samll">
            <el-input
              v-model="activityInfo.name"
              :disabled="isDisabled"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" v-model="activityInfo.phone">
            <el-input
              v-model.number="activityInfo.phone"
              :disabled="isDisabled"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group
              v-model="activityInfo.gender"
              :disabled="isDisabled"
            >
              <el-radio :label="false">男</el-radio>
              <el-radio :label="true">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所属院系" required style="margin-top: 5px">
            <el-col :span="11">
              <el-form-item>
                <el-select
                  filterable
                  v-model="activityInfo.collegeId"
                  :disabled="isDisabled"
                  placeholder="请选择学院"
                  @change="colleageChanged(activityInfo.collegeId)"
                >
                  <el-option
                    v-for="(item, index) in collegeAndMajor"
                    :key="index"
                    :label="item.collegeName"
                    :value="item.collegeId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="lines" :span="2" style="text-align: center"
              >-</el-col
            >
            <el-col :span="11">
              <el-form-item>
                <el-select
                  v-model="activityInfo.majorId"
                  :disabled="isDisabled"
                  placeholder="请选择专业"
                >
                  <el-option
                    filterable
                    v-for="(item, index) in professionalList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="班级" size="samll">
            <el-input
              v-model="activityInfo.sClass"
              :disabled="isDisabled"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>
import { queryToken, collegeQueryAll, saveUserInfo } from "@/api/user";
import {
  checkActivityStatus,
  getMyJoinActivity,
  getMyActivity,
} from "@/api/activity";
import CountDown from "@/utils/countDown.vue";
import {
  getLikesPost,
  getCollectsPost,
  getPostsAdministration,
  delPosts,
} from "@/api/comment/postManagement";
import { getTitle, updateTitle, getUserInfoById } from "@/api/titleInformation";
import jsCookie from "js-cookie";
import Pagination from "@/components/Pagination/index.vue";

export default {
  components: {
    CountDown,
    Pagination,
  },
  data() {
    return {
      token: "",
      actionUrl: "http://42.194.233.38:8222/minioservice/minio-upload/upload", // 服务器上传API地址
      uploadData: {
        bucketName: "avatar", // 上传头像时的附加参数
      },
      headers: {},
      userId: "",
      activityId: "", //活动id
      activitieList: [], //报名过的活动列表
      isDisabled: true, //控制活动报名内容是否禁用
      dialogVisible: false, //控制是否弹出对话框
      isModBut: true, //控制修改按钮
      saveBtnDisabled: false, // 保存按钮是否禁用
      isContent: true, //控制内容是否禁用
      enrollmentYear: [2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030], //入学年份
      userTitle: [], //用户头衔
      collegeAndMajor: "", //学院以及专业信息
      majorList: [], //专业列表
      posts: [], //帖子管理的列表
      likesPosts: [], //点赞过的帖子
      collectsPosts: [], //收藏过的帖子
      likesPage: 1, //查询点赞过的帖子的页数
      likesLimit: 3, //查询点赞过的帖子的条数
      likesTotal: 0, //点赞过的帖子总数
      collectsPage: 1, //查询点赞过的帖子的页数
      collectsLimit: 3, //查询点赞过的帖子的条数
      collectsTotal: 0, //点赞过的帖子总数
      page: 1, //查询点赞过的帖子的页数
      limit: 3, //查询点赞过的帖子的条数
      total: 0, //点赞过的帖子总数
      activityQueryData: {
        pageNum: 1,
        pageSize: 3,
        total: 0,
      },
      userInfo: {
        avatar: "",
        grade: "",
        phone: "",
        nickname: "",
        gender: "",
        description: "",
        majorId: "",
        collegeId: "",
      },
      activityInfo: {
        userId: "",
        activityId: "",
        name: "",
        gender: "",
        phone: "",
        sClass: "",
        majorId: "",
        collegeId: "",
      },
      titleIdList: [],
      professionalList: [],
      rules: {
        nickname: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "长度在 2 到 5 个字符",
            trigger: "blur",
          },
        ],
        collegeId: [
          {
            required: true,
            message: "请选择学院",
            trigger: "blur",
          },
        ],
        majorId: [
          {
            required: true,
            message: "请选择专业",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        grade: [
          {
            required: true,
            message: "请选择入学年份",
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            message: "请填写个人简介",
            trigger: "blur",
          },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  methods: {
    handleClose(done) {
      done();
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => { });
    },
    // handleOtherAction(activityId) {
    //   this.dialogVisible = true; // 打开对话框
    //   this.activityId = activityId;
    //   console.log(activityId);
    //   console.log(3721,this.activityId);

    //   const activity = this.activitieList.find(item => item.id === this.activityId);
    //   if (activity) {
    //     activity.a = !activity.a; // 区分活动
    //   }
    // },
    getJoinActivity(activityId) {
      //查看报名信息
      this.dialogVisible = true; // 打开对话框
      console.log(activityId);
      getMyJoinActivity(activityId)
        .then((res) => {
          if (res.code === 20000 && res.data && res.data.date) {
            this.activityInfo = res.data.date;
          } else {
            console.log(res);
          }
        })
        .catch((error) => {
          console.error("获取活动信息失败", error);
        });
    },
    getActivityStatus(activityId) {
      //获取活动状态
      checkActivityStatus(activityId)
        .then((res) => {
          if (res.code === 20000) {
            this.$store.commit("SET_ACTIVITY_STATUS", {
              activityId,
              status: res.data.status,
            });
          }
        })
        .catch((error) => {
          console.error("检查活动状态失败", error);
        });
    },
    handlePostClick(item) {
      if (item.id !== null) {
        //删除的帖子不能点击跳转
        this.$router.push(`/ywbd/postDetails?id=${item.id}`);
      } else {
        this.$message.error("这个帖子已被删除");
      }
    },
    handleClick(event) {
      // 阻止默认行为
      event.preventDefault();
      // 可以在这里执行其他逻辑
    },

    getActInfo() {
      //获取活动信息
      getMyActivity(
        this.activityQueryData.pageNum,
        this.activityQueryData.pageSize
      ).then((res) => {
        if (res.code === 20000) {
          this.activitieList = res.data.JoinActivityAndActivityByPage.records;
          this.activityQueryData.total =
            res.data.JoinActivityAndActivityByPage.total;
          // 使用 map 方法处理日期格式化，并将结果赋值回 this.activitieList
          this.activitieList = this.activitieList.map((item) => ({
            ...item, // 保留其他所有属性
            activityStart: this.formattedDate(item.activityStart),
            activityEnd: this.formattedDate(item.activityEnd),
          }));

          console.log(this.activitieList);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //前往活动详细页
    goToDetailedPage(id) {
      console.log(id);
      this.$router.push(`/activitieDetails?id=${id}`);
    },

    //报名信息
    registrationInformation(data) {
      console.log(data);
      this.activityInfo = data;
      this.dialogVisible = true;
      console.log(this.professionalList);
      console.log(this.collegeAndMajor);
    },
    //活动分页变化
    activityCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.activityQueryData.pageNum = val;
      this.getActInfo();
    },
    formattedDate(time) {
      const date = new Date(time);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    // 从 cookie 中获取 token
    getTokenFromCookie() {
      const token = jsCookie.get("token");
      console.log(token);
      return token;
    },
    // 设置 headers
    setHeaders() {
      this.headers = {
        token: this.getTokenFromCookie(),
      };
      console.log(this.headers);
    },
    //判断上传的是否为jpg、png格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 格式 或者是 PNG 格式!");
      }
    },
    //提交图片成功
    handleAvatarSuccess(res) {
      if (res.success) {
        this.$store.commit("updateUserAvatar", res.data.url);
        this.userInfo.avatar = res.data.url;
      } else {
        this.$message.error("上传失败");
      }
    },
    //点击标签页触发的方法
    handleTabClick(tab) {
      if (tab.name === "likes") {
        this.queryLikesPost();
      } else if (tab.name === "collects") {
        this.queryCollectsPost();
      } else if (tab.name === "posts") {
        this.queryPosts();
      } else if (tab.name === "activity") {
        this.getActInfo();
      }
    },
    //帖子管理分页方法
    handleSizeChange(val) {
      this.page = 1;
      this.limit = val;
      this.queryPosts;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.queryPosts();
    },
    //点赞过的帖子管理分页方法
    handleLikesSizeChange(val) {
      this.likesPage = 1;
      this.likesLimit = val;
      this.queryLikesPost;
    },
    handleLikesCurrentChange(val) {
      this.likesPage = val;
      this.queryLikesPost();
    },
    //收藏过的帖子管理分页方法
    handleCollectsSizeChange(val) {
      this.collectsPage = 1;
      this.collectsLimit = val;
      this.queryCollectsPost;
    },
    handleCollectsCurrentChange(val) {
      this.collectsPage = val;
      this.queryCollectsPost();
    },
    colleageChanged(value) {
      for (let i = 0; i < this.collegeAndMajor.length; i++) {
        if (this.collegeAndMajor[i].collegeId === value) {
          this.majorList = this.collegeAndMajor[i].majorList;
          this.userInfo.majorId = "";
        }
      }
    },
    initForm() {
      queryToken().then((res1) => {
        this.userInfo = res1.data.data.user;
        this.userId = res1.data.data.user.id;
        //初始化majorList
        collegeQueryAll().then((res) => {
          this.collegeAndMajor = res.data.data.collegeAndMajor;
          console.log(this.collegeAndMajor);
          for (let i = 0; i < this.collegeAndMajor.length; i++) {
            for (let j = 0; j < this.collegeAndMajor[i].majorList.length; j++) {
             this.professionalList.push(this.collegeAndMajor[i].majorList[j])
            }
          }
        });
        // this.getProfessionalList();
      });
    },
    mod() {
      this.isModBut = false;
      this.saveBtnDisabled = true;
      this.isContent = false;
    },
    //取消修改
    cancelMod() {
      this.isModBut = true;
      this.saveBtnDisabled = false;
      this.isContent = true;
    },
    submitForm(formName) {
      this.saveBtnDisabled = false; //点提交的时候，按钮改为禁用
      this.isModBut = true;
      this.isContent = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveUserInfo(this.userInfo).then((res) => {
            updateTitle(this.titleIdList).then((res) => {
              console.log(res);
              if (res.code == 20000) {
                this.$message.success(res.message);
              } else {
                this.$message.error("修改头衔失败，请稍后再试");
              }
            });
            this.$message.success("修改个人信息成功");
            this.token = res.data.data.token;
          });
        } else {
          this.$message.error("修改信息不符合，请再次修改");
          this.saveBtnDisabled = false;
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //查询头衔
    queryTitle() {
      getTitle(1, 100, { isPrivate: false }).then((res) => {
        if (res.code == 20000) {
          this.userTitle = res.data.list.records;
        }
      });
    },
    //查询用户使用中的头衔
    queryUserTitle() {
      getUserInfoById(this.$store.state.userInfo.id).then((res) => {
        if (res.code == 20000) {
          res.data.user.titles.forEach((title) => {
            this.titleIdList.push(title.id);
          });
          console.log(this.titleIdList);
        }
      });
    },
    //选择头衔
    handleCheckedCitiesChange(value) {
      this.titleIdList = value;
    },
    //查询点赞过的帖子
    queryLikesPost() {
      getLikesPost(this.likesPage, this.likesLimit).then((res) => {
        if (res.code == 20000 && res.data.page.size !== 0) {
          if (this.likesPosts.length !== res.data.page.total) {
            this.likesPosts = res.data.page.records;
          }
          this.likesTotal = res.data.page.total;
        }
      });
    },
    //查询收藏过的帖子
    queryCollectsPost() {
      getCollectsPost(this.collectsPage, this.collectsLimit).then((res) => {
        if (res.code == 20000 && res.data.page.size !== 0) {
          if (this.collectsPosts.length !== res.data.page.total) {
            this.collectsPosts = res.data.page.records;
          }
          this.collectsTotal = res.data.page.total;
        }
      });
    },
    queryPosts() {
      console.log(this.userId);
      getPostsAdministration(this.page, this.limit, this.userId).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          this.posts = res.data.page.records;
          this.total = res.data.page.total;
        }
      });
    },
    //删除帖子
    deletePosts(id) {
      this.$confirm("是否删除该帖子, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delPosts(id).then((res) => {
            if (res.code == 20000) {
              this.queryPosts();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {},
  created() {},
  mounted() {
    this.getActInfo();
    this.initForm();
    this.queryTitle();
    this.queryUserTitle();
    this.setHeaders();
  },
};
</script>

<style scoped>
/* position: relative; */
/* display: flex; */
/* justify-content: space-between; */
/* align-items: center; */

.activity-box {
  /* height: 500px; */
  justify-content: space-between;
}

.activeAddress {
  width: 100%;
  font-size: 14px;
}
.book {
  height: 150px;
  width: 90%;
  background-color: #fff;
  box-shadow: 2px 2px 10px rgb(236, 236, 236);
  border: 1px solid rgb(236, 236, 236);
  border-radius: 2%;
  padding: 2% 5% 2% 5%;
  margin: 5px;
  position: relative;
}

.book .title {
  font-size: 25px;
  font-family: "STXingkai";
}

.book .type {
  /* font-size: 25px; */
  /* font-family: "STXingkai"; */
}

.book .contents {
  height: 25px;
  width: 100%;
  margin-left: 10px;
  font-size: 14px;
  padding: 20px;
  margin-top: 3px;
}

.book .bottom .z {
  width: 90%;
  float: left;
}

.book .z .time,
.book .z .place {
  margin-left: 10px;
  font-size: 14px;
  text-align: center;
}

.book .y {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 0px;
}

.book .y .down {
  font-size: 14px;
}

.Date {
  width: 170px;
  /*     显示时间盒子的宽度      */
}

.book .y .button-wrapper {
  font-size: 18px;
  margin-top: 10px;
  margin-left: 370px;
}

.book .background {
  background-color: #7298c3;
  height: 20px;
  width: calc(100%);
}

.time-box {
  display: flex;
  width: 500px;
  align-items: center;
  height: 0px;
}

.times {
  margin-left: 160px;
  font-size: 14px;
}

.activeTimeLayout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  line-height: 30px;
}

.activeTimeLayouts {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  line-height: 30px;
  width: 277px;
}

.activeTime {
  font-size: 14px;
  text-align: left;
}

.activeTimeContainer {
  position: absolute;
  display: flex;
  bottom: 8vw;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.pContent {
  width: 460px;
  display: block;
}

.del {
  margin-right: 295px;
  margin-top: -35px;
}

.pbox {
  width: 115px;
}

li {
  list-style-type: none;
}

.el-tabs {
  margin: 20px auto;
  width: 930px;
  background-color: #f5f5f5;
  padding: 20px;
  height: 590px;
}

.form {
  margin: 0 10px;
  padding: 5px 20px;
  padding-right: 80px;
  border-radius: 20px;
  border: 2px solid skyblue;
  background-color: cornsilk;
}

.infinite-list-item {
  display: flex;
  height: 150px;
  background-color: #fff;
  box-shadow: 2px 2px 10px rgb(236, 236, 236);
  border: 1px solid rgb(236, 236, 236);
  border-radius: 2%;
  padding: 2% 5% 2% 5%;
  justify-content: flex-end;
}

.postImage {
  height: 100px;
  width: 223px;
  margin-top: 5px;
  cursor: pointer;
}

.infinite-list-item span {
  margin-left: 30px;
}

.header {
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headerContent {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
}

.content {
  width: 500px;
  height: 100px;
  margin-left: 30px;
  word-wrap: break-word;
  cursor: pointer;
  overflow: hidden;
  word-break: break-all;
  /*允许在单词内换行，更美观*/
  text-overflow: ellipsis;
  display: -webkit-box;
  /*元素作为box伸缩盒子*/
  -webkit-line-clamp: 4;
  /*设置文本行数限制*/
  -webkit-box-orient: vertical;
  /*设置文本排列方式*/
}

.userAvatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: #fff;
  background: #c0c4cc;
  margin-left: 30px;
  margin-top: 10px;
}

.usersAvatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: #fff;
  background: #c0c4cc;
  margin-left: 30px;
  margin-top: 10px;
}

.userContent {
  display: flex;
  align-items: center;
}

.el-pagination {
  margin-left: 40%;
}

.el-form-item__content {
  line-height: 20px;
  position: relative;
  font-size: 14px;
}

.el-checkbox {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin-right: 10px;
}
.basicInformation {
  display: flex;
  justify-content: space-between;
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0;
}
</style>
